<template>
    <Dialog v-model="dialogVisible" title="授课详情">
        <el-descriptions border :column="3">
            <el-descriptions-item label="授课老师" width="100">
                {{ baseInfo.name }}
            </el-descriptions-item>
            <el-descriptions-item label="专业" width="100">
                {{ baseInfo.majorName }}
            </el-descriptions-item>
            <el-descriptions-item label="上课人数" width="100">
                {{ baseInfo.count }}
            </el-descriptions-item>
            <el-descriptions-item label="课后总结">
                <el-text>{{ baseInfo.summary }}</el-text>
            </el-descriptions-item>
            <el-descriptions-item label="课后图片">
                <div style="width: 36px; height: 36px">
                    <el-image v-if="baseInfo.picture" :src="baseInfo.picture" :preview-src-list="[baseInfo.picture]" preview-teleported hide-on-click-modal/>
                </div>
            </el-descriptions-item>
        </el-descriptions>
        <el-table :data=list>
            <el-table-column label="头像" prop="avatar" width="50">
                <template #default="scope">
                    <div style="width: 36px; height: 36px">
                        <el-image v-if="scope.row.avatar" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]" preview-teleported hide-on-click-modal/>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="学号" prop="code" show-overflow-tooltip/>
            <el-table-column label="姓名" prop="name" show-overflow-tooltip/>
            <el-table-column label="手机号" prop="mobile" width="120" show-overflow-tooltip/>
            <el-table-column label="性别" prop="sex">
                <template #default="scope">
                    <dict-tag :type="DICT_TYPE.SYSTEM_USER_SEX" :value="scope.row.sex"/>
                </template>
            </el-table-column>
            <el-table-column :formatter="dateFormatter" label="上课时间" prop="startTime" width="160"/>
        </el-table>

        <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" :total="total" @pagination="getList"/>
    </Dialog>
</template>
<script lang="ts" setup>
import {useCourseDetailApi} from "@/api/yxt/course";
import {dateFormatter} from "@/utils/formatTime";
import {DICT_TYPE} from "@/utils/dict";

defineOptions({name: 'YxtCourseDetail'})

const detailApi = useCourseDetailApi();
const dialogVisible = ref(false)
const list = ref<Array<any>>([])
const total = ref(0)

const queryParams = reactive({
    pageNo: 1,
    pageSize: 10,
    courseId: undefined
})

const baseInfo = ref<any>({
    name: '',
    majorName: '',
    count: '',
    summary: ''
})

const open = async (row: any) => {
    dialogVisible.value = true
    if (row) {
        queryParams.courseId = row.id;
        baseInfo.value = row;
        await getList();
    }
}

const getList = async () => {
    const data = await detailApi.getDetailPage(queryParams)
    list.value = data.list
    total.value = data.total
}

defineExpose({open})
</script>
